/**
 * Created by Ysssssss on 2021/5/11.
 */

import React, { useState, useEffect, useRef, useCallback } from 'react'
import {priceFenToYuan, priceYuanToFen} from "@utils/priceConversion";
import {Row, Col, Input, InputNumber, Table} from "antd";
import InputNumberWithSuffix from "@common/presentational/InputNumberWithSuffix";



const ShoppingMallProductDetailStandard = props => {
    const { value = [], onChange, productPreviewInfo } = props

    const handleStandardPriceChange = (index, price) => {
        onChange([
            ...value.slice(0, index),
            {
                ...value[index],
                custom_price: priceYuanToFen(price),
            },
            ...value.slice(index + 1),
        ])
    }

    const revertPrice = index => {
        onChange([
            ...value.slice(0, index),
            {
                ...value[index],
                custom_price: productPreviewInfo.skus[index].price,
            },
            ...value.slice(index + 1),
        ])
    }


    let columns = [{
        title: '规格属性',
        dataIndex: 'items',
        key: 'items',
        render: (text, record, index) => productPreviewInfo.skus[index].name
    },{
        title: '价格（元）',
        dataIndex: 'custom_price',
        key: 'custom_price',
        render: (text, record, index) => (
            <InputNumberWithSuffix
                min={0.01}
                max={100000000}
                step={1}
                precision={2}
                value={priceFenToYuan(text)}
                style={{ width: '180px' }}
                onChange={handleStandardPriceChange.bind(this, index)}
                suffix={(
                    <span className="clr-green cur-poi" onClick={revertPrice.bind(this, index)}>重置</span>
                )}
            />
        )
    }]
    if (productPreviewInfo.nature !== 2) {
        columns.push({
            title: '重量（g）',
            dataIndex: 'weight',
            key: 'weight',
            render: (text, record, index) => productPreviewInfo.skus[index].weight
        })
    }

    return (
        <Row>
            <Col span={4}>规格设置</Col>
            <Col span={20}>
                <Table
                    columns={columns}
                    pagination={false}
                    dataSource={value.map((v,index) => ({...v, key: `standard_${index}`}))}
                />
            </Col>
        </Row>
    )
}

const ShoppingMallProductDetailNoStandard = props => {
    const { value = [], onChange, productPreviewInfo } = props

    const handleStandardPriceChange = (inputValue) => {
        onChange([{
            ...value[0],
            custom_price: priceYuanToFen(inputValue),
        }])
    }

    const revertPrice = () => {
        onChange([{
            ...value[0],
            custom_price: productPreviewInfo.skus[0].price,
        }])
    }

    return (
        <>
            <Row>
                <Col span={4}>商品价格</Col>
                <Col span={20}>
                    <InputNumberWithSuffix
                        min={0.01}
                        max={100000000}
                        step={1}
                        precision={2}
                        value={priceFenToYuan(value[0].custom_price)}
                        className="w-100"
                        onChange={handleStandardPriceChange}
                        suffix={(
                            <span className="clr-green cur-poi" onClick={revertPrice}>重置</span>
                        )}
                    />
                </Col>
            </Row>
            { productPreviewInfo.nature === 2 ? null : (
                <Row>
                    <Col span={4}>商品重量</Col>
                    <Col span={20}>
                        { productPreviewInfo.skus[0].weight }
                    </Col>
                </Row>
            ) }
        </>
    )
}

const ShoppingMallProductDetailStandardHandle = props => {
    const { productPreviewInfo, value } = props
    if (value === undefined) return null
    return productPreviewInfo.skus.length && productPreviewInfo.skus[0].items.length ? <ShoppingMallProductDetailStandard { ...props }/> : <ShoppingMallProductDetailNoStandard { ...props }/>
}

export default ShoppingMallProductDetailStandardHandle
